<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>

    <style>
      table{
        text-align: center;
        margin: auto;
        border: 2px solid;
        width: 45%;
      }
      td,th{
        border: 2px solid;
      }
      div{
        padding-top: 10px;
        padding-left: 28%;
      }
      .over{
        background: lightpink;
      }
      .out{
        background: white;
      }
    </style>

    <script>
      /**
       * 分析：
       *    1.全选：
       *      * 获取所有的 checkbox
       *      * 遍历 checkbox，设置每一个 checkbox 的状态为选中 checked
       */
      //1.在页面加载完成后绑定事件
      window.onload = function (){
        //获取所有的 checkbox
        var cbs = document.getElementsByName("cb");
        //2.给全选按钮绑定单击事件
        document.getElementById("selectAll").onclick = function () {
            //全选
            //2.遍历
            for (var i = 0; i < cbs.length; i++) {
                //3.设置每一个 cb 的状态为选中 checked
                cbs[i].checked = true;
            }
        }
        //3.给全不选按钮绑定单击事件
        document.getElementById("unSelectAll").onclick = function () {
            //全不选
            //2.遍历
            for (var i = 0; i < cbs.length; i++){
              //3.设置每一个 cb 的状态为不选中 checked
              cbs[i].checked = false;
            }
        }
        //4.给反选按钮绑定单击事件
        document.getElementById("selectRev").onclick = function () {
            //反选
            //2.遍历
            for (var i = 0; i < cbs.length; i++){
                //3.设置每一个 cb 的状态为相反的状态 checked
                cbs[i].checked = !cbs[i].checked;
            }
        }
        //5.点击表头的选择框，让下面的选择框与表头的选择框的状态一致
        cbs[0].onclick = function () {
            for (var i = 1; i <= cbs.length; i++){
                cbs[i].checked = cbs[0].checked;
            }
        }
        //6.鼠标移动改变行的颜色
        var trs = document.getElementsByTagName("tr");
        for (var i = 0; i < trs.length; i++) {
            //鼠标放在该行上，该行变为粉色
            trs[i].onmouseover = function () {
                //this.setAttribute("bgcolor","#ffb6c1");
              this.className = "over";
            }
            //鼠标离开该行，该行颜色恢复
            trs[i].onmouseout = function () {
                //this.removeAttribute("bgcolor");
              this.className = "out";
            }
        }
      }

      //删除
      function delTr(obj) {
      var table = obj.parentNode.parentNode.parentNode;
      var tr = obj.parentNode.parentNode;
      table.removeChild(tr);
    }
  </script>
</head>
<body>

    <table>
      <caption>学生信息表</caption>
      <tr>
        <th><input type="checkbox" name="cb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
      </tr>

      <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>喜羊羊</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
      </tr>

      <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td>灰太狼</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
      </tr>

      <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>孙悟空</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
      </tr>
    </table>
    <div>
    <input id="selectAll" type="button" value="全选">
    <input id="unSelectAll" type="button" value="全不选">
    <input id="selectRev" type="button" value="反选">
    </div>

</body>
</html>